<template>
  <z-paging 
    ref="pagingRef" 
    v-model="recordList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :loading-more-enabled="true"
  >
    <template #top>
      <wd-navbar 
        title="错题库" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>

      <view class="content-wrapper px-[30rpx] pt-[30rpx]">
        <!-- 内容区域 -->
        <view class="flex justify-center items-center">
          <!-- 左侧圆圈 -->
          <view class="circle-wrapper mr-[60rpx]">
            <view class="circle w-[288rpx] h-[288rpx] rounded-full border-[6rpx] border-[#7FD77F] border-solid flex items-center justify-center bg-white">
              <text class="text-[100rpx] font-bold text-[#333]">{{ userStore.userInfo.wrong_count || 0 }}</text>
            </view>
          </view>
          <!-- 右侧按钮 -->
          <view class="flex flex-col">
            <view 
              class="btn btn-review w-[280rpx] h-[80rpx] rounded-full border-[4rpx] border-[#c00c0c] border-solid flex items-center justify-center bg-white mb-[62rpx]"
              @click="handleReview"
            >
              <text class="text-[40rpx] text-[#C00C0C]">错题复习</text>
            </view>
            <view 
              class="btn btn-practice w-[280rpx] h-[80rpx] rounded-full border-[4rpx] border-[#7FD77F] border-solid flex items-center justify-center bg-white"
              @click="handlePractice"
            >
              <text class="text-[40rpx] text-[#282828]">错题练习</text>
            </view>
          </view>
        </view>
        <view class="record-title pt-[30rpx]">考试记录</view>
      </view>
    </template>
    <!-- 考试记录列表 -->
    <view class="px-[30rpx] pb-[0rpx] box-border">
      <view 
        class="record-item"
        v-for="item in recordList" 
        :key="item.id"
        @click="handleRecord(item)"
      >
        <!-- 左侧分数 -->
        <view class="record-score-box">
          <text class="record-score-num">{{ item.score ?? '--' }}</text>
        </view>
        
        <!-- 中间信息 -->
        <view class="record-info">
          <view class="title-with-score">
            <view class="item-title">{{ item.title || '--' }}</view>
            <text class="score-badge">({{ item.paper_score ?? '--' }}分)</text>
          </view>
          <view class="record-meta">
            <text>{{ item.created_at || '--' }}</text>
            <text>用时: {{ formatSeconds(item.duration) }}</text>
          </view>
        </view>
        
        <!-- 右侧用时 -->
        
      </view>
    </view>
  </z-paging>
  <view v-if="recordList.length > 0" style="height: 80rpx;"></view>
</template>

<script setup>
import { ref } from 'vue'
// import dayjs from 'dayjs'
// @ts-ignore
import { recorddList } from '@/api/exam.js'
import { formatSeconds } from '@/utils'
import { useUserStore } from '@/store'

const userStore = useUserStore()

// 页面加载时重新获取用户信息
onLoad(() => {
  userStore.fetchUserInfo()
})

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '错题库',
  },
})

defineOptions({
  name: 'WrongQuestionBank',
})

const pagingRef = ref(null)
const recordList = ref([])

const goBack = () => {
  uni.navigateBack()
}

// 错题复习
const handleReview = () => {
  uni.navigateTo({
    url: '/pages-children/wrongReview/index'
  })
}

// 错题练习
const handlePractice = () => {
  uni.navigateTo({
    url: '/pages-children/examQuestion/index?type=wrongExercise'
  })
}

// 查看考试记录
const handleRecord = (item) => {
  uni.navigateTo({
    url: `/pages-children/examRecordDetail/index?exam_id=${item.id}`, 
  })
}

// 查询考试记录列表
const queryList = (page, size) => {
  recorddList({
    page,
    size
  }).then(res => {
    pagingRef.value.complete(res.list);
  }).catch(err => {
    pagingRef.value.complete(false);
  })
}
</script>

<style lang="scss">
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>
.record-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.record-title::before {
  content: '';
  display: inline-block;
  width: 12rpx;
  height: 40rpx;
  background-color: #7FD77F;
  border-radius: 4rpx;
  margin-right: 10rpx;
  position: relative;
  top: 8rpx;
}

.record-item {
  // height: 140rpx;
  background: white;
  border-radius: 12rpx;
  margin-top: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.record-score-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 8rpx solid #7FD77F;
  color: #7FD77F;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.record-score-num {
  font-size: 52rpx;
  font-weight: bold;
}

.record-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-right: 20rpx;
}

.title-with-score {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8rpx;
  margin-bottom: 12rpx;
  flex-wrap: wrap;
}

.item-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-clamp: 2;
}

.score-badge {
  font-size: 28rpx;
  // color: #7FD77F;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.record-meta {
  font-size: 28rpx;
  color: #777;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
